<template>
	<view>
		<van-popup v-model="isShow" position="bottom"  :round="true" :style="{ height: '60%' }">
			<view class="time_zone">
				<view class="time_box">
					<view class="start" :class="{time_active:currentShow == 1}" @click="startTime">
						{{titleTime(startDate)}}
					</view>
					<view class="middle">
						至
					</view>
					<view class="end" :class="{time_active:currentShow == 2}" @click="endTime">
						{{titleTime(endDate)}}
					</view>
				</view>
			</view>
			<van-datetime-picker @confirm="confirm" :formatter="formatter" @cancel="cancel" v-model="currentDate" type="date" :title="title"
				:min-date="minDate" />
		</van-popup>
	</view>
</template>

<script>
	//:isTimePickerShow="isTimePickerShow   //父组件上isTimePickerShow用来控制开关
	//@close="timeClose"    //委托父组件timeClose关闭弹窗
	//@confirm="timeConfirm"   //点击确认后传给父组件的所选时间,{startDate:this.startDate,endDate:this.endDate}
	import Vue from 'vue';
	import {
		DatetimePicker,
		Popup,
		Overlay
	} from 'vant';
	import '@/node_modules/vant/lib/datetime-picker/style/index.js';
	import '@/node_modules/vant/lib/popup/index.css';
	import '@/node_modules/vant/lib/overlay/index.css';
	Vue.use(DatetimePicker);
	Vue.use(Popup);
	Vue.use(Overlay);

	export default {
		name: "my-time-picker",
		props: {
			isTimePickerShow: {
				default: false,
				reuired: false
			},
			title:{
				default:'选择年月日',
				required:false
			},
			Timehuixian:{
				default:'',
				required:false
			}
		},
		data() {
			return {
				currentShow: 1, //1开始时间  2结束时间
				show: false,
				minDate: new Date(2020, 0, 1),
				currentDate: new Date(),
				endDate: '结束时间',
				startDate: new Date(),
				formatter(type, val) {
					if (type === 'year') {
						return val + '年';
					}
					if (type === 'month') {
						return val + '月';
					}
					if (type === 'day') {
						return val + '日';
					}
					return val;
				},
			};
		},
		computed: {
			titleTime(date) {
				return (date) => {
					if (date instanceof Date) {
						let y = date.getFullYear();
						let m = (date.getMonth() + 1).toString().padStart(2, 0);
						let d = date.getDate().toString().padStart(2, 0);
						return `${y}-${m}-${d}`
					} else {
						return date
					}

				}
			},
			isShow: {
				get() {
					return this.isTimePickerShow
				},
				set(value) {
					this.$emit('close', false)
				}
			},
			startAndEnd() {
				return {
					startDate: this.startDate,
					endDate: this.endDate
				}
			}
		},
		watch: {
			currentDate(ne) {
				if (this.currentShow == 1) {
					this.startDate = this.titleTime(ne)
				}
				if (this.currentShow == 2) {
					this.endDate = this.titleTime(ne)
				}
			},
			Timehuixian:{
				handler(obj){
					if(obj){
						this.currentDate = new Date(obj.startDate)
						this.startDate = obj.startDate
						 this.endDate = obj.endDate
					}
				},
				immediate:true
			}
		},
		methods: {
			startTime() {
				this.currentShow = 1
				//console.log(this.startDate);
				this.currentDate = new Date(this.startDate)
				// if(this.startDate instanceof Data){
					
				// }
			},
			endTime() {
				this.currentShow = 2
				if(this.endDate != '结束时间'){
					this.currentDate = new Date(this.endDate)
				}
			},
			isPass() {
				if (this.endDate == '结束时间') {
					uni.showToast({
						title: '请选择结束时间',
						icon: 'none'
					})
					return false
				}
				let start = new Date(this.startDate)
				let end = new Date(this.endDate)
				if (end < start) {
					uni.showToast({
						title: '开始时间必须小于结束时间',
						icon: 'none'
					})
					return false
				}
				return true
			},
			confirm() {
				if (!this.isPass()) return //校验
				this.isShow = false
				this.$emit('confirm', this.startAndEnd)
			},
			cancel() {
				this.isShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	$my-color: #4DC0D9; //变量，如果确认和高亮不是这个颜色，改这一个值就行了

	.time_zone {
		position: absolute;
		top: 90px;
		z-index: 9999;
		width: 100%;

		.time_box {
			display: flex;
			justify-content: space-around;
			font-size: 32rpx;
			color: #212121;

			.time_active {
				border-bottom: 1px solid $my-color !important;
				color: $my-color;
			}

			.start {
				text-align: center;
				width: 280rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #ccc;
			}

			.middle {}

			.end {
				text-align: center;
				width: 280rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #ccc;
			}
		}
	}

	::v-deep .van-picker__columns {
		margin-top: 140px;
	}

	::v-deep .van-picker__confirm {
		font-size: 32rpx;
		color: $my-color;
	}

	::v-deep .van-picker__cancel {
		font-size: 32rpx;
	}
	::v-deep .van-picker__title{
		font-size: 34rpx;
		font-weight: bold;
	}
	::v-deep .van-picker-column__item {
		font-size: 32rpx;
	}
</style>